.login_wrap {
  width: 100vw;
  height: 100vh;
  background: url(./image/bg1.png) no-repeat;
  background-size: 100%, 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;

  .login_content_card {
    // width: 600px;
    // height: 360px;
    // background: rgba(255, 255, 255, 0.16);
    // backdrop-filter: blur(50px); /* 背景模糊 */
    border-radius: 12px;
    // box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1), -1px -1px 2px rgba(0, 0, 0, 0.1);
    padding: 50px 50px 150px 50px;
    box-sizing: border-box;

    .user_box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      user-select: none;

      .avatar_box {
        .avatar_img {
          width: 50px;
          height: 50px;
        }
      }

      .user_name {
        // font-family: VIVO1;
        color: rgb(255, 255, 255);
        font-family: Apple-R;
        font-size: 20px;
        letter-spacing: 0.8px;
        position: relative;
        left: 1.6px;
      }
    }

    .input_box {
      position: relative;
      .login_password_input {
        margin-top: 50px;
        border-radius: 16px;
        font-size: 14px;
        transition: 0.2s;
      }

      .login_password_input::placeholder {
        color: rgb(109, 109, 109);
        font-size: 15px;
        font-family: Apple-R;
      }

      .loader {
        width: 20px;
        height: 20px;
        border: 2px solid rgba(0, 0, 0, 0.5);
        border-left-color: transparent;
        border-radius: 50%;
        animation: spin89345 0.46s linear infinite;
        position: absolute;
        right: 8px;
        top: 22%;
        // transform: translateY(50px);
      }

      @keyframes spin89345 {
        0% {
          transform: rotate(0deg);
        }

        100% {
          transform: rotate(360deg);
        }
      }
    }
  }
}
